<template>
    <div class="ActiveBoard" ref="View">
        <div class="Hover" v-if="StateEvent.HoverItemId.value" :style="HoverStyle">
            <div class="Title" :style="{ color: token.colorPrimaryHover }">
                {{ HoverTitle }}
            </div>
        </div>
        <div class="Active" v-if="StateEvent.ActiveId.value" :style="ActiveStyle">
            <div class="ActiveTitle" @mouseup.stop.prevent :style="ActiveTitleStyle">
                <div class="DropDownMenu">
                    <a-checkable-tag class="DropDownTitle" :checked="true">
                        <span class="C-Icon" v-html="ActiveConfig.icon"></span>
                        <span>{{ ActiveConfig.title }}</span>
                    </a-checkable-tag>
                    <div class="dropDown">
                        <div class="DropDownItem" v-for="item in StateEvent.ParentList.value">
                            <a-tag color="#888888" @click.stop.prevent="SelectItem(item)">
                                <span class="C-Icon" v-html="item.icon"></span>
                                <span>{{ item.name }}</span>
                            </a-tag>
                        </div>
                    </div>
                </div>
                <a-tooltip>
                    <template #title>
                        <span>隐藏</span>
                    </template>
                    <a-checkable-tag :checked="true" v-if="ActiveConfig.hide !== false">
                        <span class="C-Icon">&#xe6ec;</span>
                    </a-checkable-tag>
                </a-tooltip>
                <a-tooltip>
                    <template #title>
                        <span>复制</span>
                    </template>
                    <a-checkable-tag :checked="true" v-if="ActiveConfig.copy !== false"
                        @click="StateEvent.CopyItem(ActiveConfig.id)">
                        <span class="C-Icon">&#xe747;</span>
                    </a-checkable-tag>
                </a-tooltip>
                <a-tooltip>
                    <template #title>
                        <span>删除</span>
                    </template>
                    <a-checkable-tag :checked="true" v-if="ActiveConfig.delete !== false"
                        @click="StateEvent.DeleteItem(ActiveConfig.id)">
                        <span class="C-Icon">&#xe679;</span>
                    </a-checkable-tag>
                </a-tooltip>
            </div>
        </div>
        <div class="DragMark" v-if="StateEvent.DragMarkRect.value" :style="DragMarkStyle"></div>


        <div class="Indicate" v-if="StateEvent.IndicateRect.value" :style="IndicateStyle">
            <div class="UP" :style="{ background: token.colorPrimaryHover, }"
                v-if="StateEvent.IndicateType.value == 'UP'">
            </div>
            <div class="DOWN" :style="{ background: token.colorPrimaryHover, }"
                v-if="StateEvent.IndicateType.value == 'DOWN'">
            </div>
            <div class="IN" :style="{ borderColor: token.colorPrimaryHover, }"
                v-if="StateEvent.IndicateType.value == 'IN'">
                <span :style="{ color: token.colorPrimaryHover }">放入到 {{ IndicateTitle }} 中</span>
            </div>

            <div class="LEFT" :style="{ background: token.colorPrimaryHover, }"
                v-if="StateEvent.IndicateType.value == 'LEFT'">
            </div>
            <div class="RIGHT" :style="{ background: token.colorPrimaryHover, }"
                v-if="StateEvent.IndicateType.value == 'RIGHT'">
            </div>
        </div>

        <div class="MouseMoveState" v-if="StateEvent.MouseMoveCache.value.name" :style="MouseMoveStyle">
            <span class="C-Icon" v-html="StateEvent.MouseMoveCache.value.icon"></span>
            <span>{{ StateEvent.MouseMoveCache.value.name }}</span>
        </div>
    </div>
</template>
<script setup>
import { computed, inject, ref } from "vue";
import { theme } from 'ant-design-vue';
const { token } = theme.useToken();

const View = ref();
const StateEvent = inject('StateEvent');


const SelectItem = function (item) {
    StateEvent.ActiveId.value = item.id
}

const MouseMoveStyle = computed(() => {
    if (StateEvent.MouseMoveCache.value.name) {
        return {
            top: StateEvent.MouseMoveCache.value.y + 'px',
            left: StateEvent.MouseMoveCache.value.x + 10 + 'px',
            boxShadow: token.value.boxShadowSecondary,
            background: token.value.colorPrimaryBgHover,
            borderRadius: token.value.borderRadius + 'px',
            padding: token.value.paddingXS + 'px',
            color: token.value.colorPrimary
        }
    }
})

const IndicateStyle = computed(() => {
    if (StateEvent.IndicateRect.value && View.value) {
        return {
            width: StateEvent.IndicateRect.value.width - 1 + 'px',
            height: StateEvent.IndicateRect.value.height + 'px',
            top: StateEvent.IndicateRect.value.top + 'px',
            left: StateEvent.IndicateRect.value.left + 'px',
        }
    };
})
const IndicateTitle = computed(() => {
    if (StateEvent.IndicateId.value) {
        var Rule = StateEvent.GetRuleById(StateEvent.IndicateId.value);
        var title = Rule.title;
        if (title) {
            return title
        } else {
            var RuleConfig = StateEvent.GetRuleType(Rule.type);
            return RuleConfig.name
        }
    }
})

const DragMarkStyle = computed(() => {
    if (StateEvent.DragMarkRect.value && View.value) {
        return {
            background: token.value.colorTextSecondary,
            width: StateEvent.DragMarkRect.value.width + 1 + 'px',
            height: StateEvent.DragMarkRect.value.height + 1 + 'px',
            top: StateEvent.DragMarkRect.value.top - 1 + 'px',
            left: StateEvent.DragMarkRect.value.left - 1 + 'px',
        }
    };
})


const ActiveTitleStyle = computed(() => {
    if (StateEvent.ActiveRect.value && View.value) {
        const Rect = View.value.getBoundingClientRect();
        const top = StateEvent.ActiveRect.value.top;
        const height = StateEvent.ActiveRect.value.height;
        const right = document.body.clientWidth - StateEvent.ActiveRect.value.right + 3

        if (Rect.top < top - 27) {
            return {
                top: top - 27 + 'px',
                right: right + 'px',
            }
        } else {
            if (top + height < Rect.top) {
                return {
                    display: 'none'
                }
            } else if (top + height > Rect.height) {
                return {
                    top: Rect.top + 15 + 'px',
                    right: right + 7 + 'px',
                }
            } else {
                return {
                    top: top + height + 5 + 'px',
                    right: right + 'px',
                }
            }
        }
    } else {
        return {
            display: 'none'
        }
    }
})
const ActiveConfig = computed(() => {
    if (StateEvent.ActiveId.value) {
        const Rule = StateEvent.GetRuleById(StateEvent.ActiveId.value);
        let title = null;
        var RuleConfig = StateEvent.GetRuleType(Rule.type);
        if (Rule.title) {
            title = Rule.title;
        } else {
            title = RuleConfig.name
        }
        return {
            id: StateEvent.ActiveId.value,
            ParentList: StateEvent.ParentList,
            title,
            icon: RuleConfig.icon,
            delete: RuleConfig?.Tools?.Delete,
            copy: RuleConfig?.Tools?.Copy,
            hide: RuleConfig?.Tools?.Hide,
        }
    } else {
        return {}
    }
})
const ActiveStyle = computed(() => {
    if (StateEvent.ActiveRect.value && View.value) {
        var Rect = View.value.getBoundingClientRect();
        return {
            borderColor: token.value.colorPrimaryHover,
            width: StateEvent.ActiveRect.value.width - 1 + 'px',
            height: StateEvent.ActiveRect.value.height + 'px',
            top: StateEvent.ActiveRect.value.top - Rect.top + 'px',
            left: StateEvent.ActiveRect.value.left - Rect.left + 'px',
        }
    };
})


const HoverTitle = computed(() => {
    if (StateEvent.HoverItemId.value) {
        var Rule = StateEvent.GetRuleById(StateEvent.HoverItemId.value);
        var title = Rule.title;
        if (title) {
            return title
        } else {
            var RuleConfig = StateEvent.GetRuleType(Rule.type);
            return RuleConfig.name
        }
    }
})
const HoverStyle = computed(() => {
    if (StateEvent.HoverRect.value && View.value) {
        return {
            borderColor: token.value.colorPrimaryHover,
            width: StateEvent.HoverRect.value.width - 1 + 'px',
            height: StateEvent.HoverRect.value.height + 'px',
            top: StateEvent.HoverRect.value.top + 'px',
            left: StateEvent.HoverRect.value.left + 'px',
        }
    } else {
        return {
            display: 'none'
        }
    };
})



</script>

<style lang="less" scoped>
.ActiveBoard {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 999;
    pointer-events: none;
    user-select: none;

    .MouseMoveState {
        position: fixed;
        z-index: 9999;
        pointer-events: none;
        padding: 4px;

        .C-Icon {
            margin-right: 8px;
        }
    }

    .Hover {
        position: fixed;
        border: 1px dashed;
    }

    .Indicate {
        position: fixed;
        z-index: 999;

        .UP {
            position: absolute;
            top: -2px;
            width: 100%;
            height: 4px;
            border-radius: 2px
        }

        .DOWN {
            position: absolute;
            bottom: -2px;
            width: 100%;
            height: 4px;
            border-radius: 2px
        }


        .LEFT {
            position: absolute;
            left: -2px;
            width: 4px;
            height: 100%;
            border-radius: 2px
        }

        .RIGHT {
            position: absolute;
            right: -2px;
            width: 4px;
            height: 100%;
            border-radius: 2px
        }

        .IN {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            border: 1px dashed
        }
    }

    .Active {
        position: absolute;
        border: 1px solid;
    }

    .DragMark {
        pointer-events: all;
        z-index: 999;
        position: fixed;
        opacity: 0.7;
    }

    .ActiveTitle {
        display: flex;
        position: fixed;
        // right: 0;
        // top: -2em;
        margin-left: -100%;
        pointer-events: all;
        align-items: flex-start;

        .DropDownMenu {
            text-align: right;

            span {
                margin: 0;
            }

            .C-Icon {
                margin-right: 3px;
            }
        }

        .DropDownMenu:hover {
            .dropDown {
                display: block;
            }
        }

        .dropDown {
            display: none;
        }

        .DropDownItem {
            cursor: pointer;
            margin-top: 2px;
        }

        .C-Icon {
            font-size: 12px;
            margin-right: 3px;
        }

        // >span:first-child {
        //     padding-right: 6px;
        // }

        >span {

            cursor: pointer;
            padding-right: 3px;
            margin-right: 0px;
            margin-left: 3px;
        }

    }

    .Title {
        position: absolute;
        top: -1.3em;
        left: 0;
    }
}
</style>